define(['vue','layer'],function (Vue,layer){
    'use strict';
    const muimgs = {
        template:`<div class="custom-upload-wrapper">
            <el-upload
                class="custom-upload"
                v-model:file-list="showList"
                :action="uploadurl"
                list-type="picture-card"
                :on-remove="handleRemove"
                :on-success="handleFileSuccessMultiple"
            >
                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <el-button 
               style="margin-left: 25px"
                color="#626aef" 
                type="primary" 
                @click="handleShowAttachment"
            >
                选择图片
            </el-button>
        </div>`,
        props:{
            modelValue: { type:Array||String, default: [] },
        },
        emits: ['update:modelValue'],
        data(){
            return {
                uploadurl: Config.upload.uploadurl,
            }
        },
        setup(props, { emit }) {
            console.log(Config.upload.uploadurl,'lllllllllllllllllllllllllll')
            const showList = Vue.ref([]);
            if(Array.isArray(props.modelValue)){
                showList.value = props.modelValue.map(item=>{
                    return {
                        url:item,
                        name:item
                    }
                })
            }else{
                let strArr = props.modelValue.split(',')
                strArr.forEach(item=>{
                    showList.value.push({
                        url:item,
                        name:item
                    })
                })
            }
            const handleFileSuccessMultiple = (response,uploadFile)=>{
                if(!Array.isArray(props.modelValue)){
                    emit('update:modelValue', [])
                }
                if(response.code==1){
                    //添加到图片列表中
                    let has = false;
                    for(let i=0;i<showList.value.length;i++){
                        if(showList.value[i].url==response.data.url){
                            has = true
                            break
                        }
                    }
                    if(has===false){
                        showList.value.push({
                            url:response.data.url,
                            name:response.data.url,
                        })
                        //更新值
                        updateValue()
                    }

                }
            }
            //更新值
            const updateValue = ()=>{
                let value = showList.value.map(item=>item.url)
                emit('update:modelValue',value)
            }
            //移除图片
            const handleRemove = (uploadFile, uploadFiles)=>{
                let url = uploadFile&&uploadFile.url?uploadFile&&uploadFile.url:uploadFile.response.data.url;
                showList.value = showList.value.filter(item=>item.url!=url)
                updateValue()
            }
            //选择图片
            const handleShowAttachment = ()=>{
                let url = Config.domain+Config.attachment_url+`?select=1&multiple=1`
                let option = {
                    callback:function (res){
                        let newshowList = [];
                        res = res.filter(item=>showList.value.indexOf(item)==-1)
                        for(let i=0;i<res.length;i++){
                            newshowList.push({
                                url:res[i],
                                name:res[i]
                            })
                        }
                        showList.value = [...showList.value,...newshowList]
                        updateValue()
                    }
                }
                if(option.callback){
                    window.callback = option.callback
                }
                if(option.success){
                    window.success = option.success
                }
                if(option.cancel){
                    window.cancel = option.cancel
                }
                if(option.end){
                    window.end = option.end
                }
                if(option.close){
                    window.close = option.close
                }
                if(url.indexOf('http')==-1){
                    url = Config.moduleurl+'/'+url;
                }
                option.title = option.title||'页面'
                option.shadeClose = option.shadeClose||true
                option.shade = option.shade||0.8
                option.area = option.area||['99%','99%']
                option.success = option.success||null
                option.cancel = option.cancel||null
                option.end = option.end||null
                option.close = option.close||null
                option.content = url
                option.type = option.type||2
                layer.open(option)
            }
            Vue.onMounted(() => {
                const style = document.createElement('style');
                style.textContent = `
                    .custom-upload-wrapper {
                        display: flex;
                        align-items: center;
                    }
                    .custom-upload .el-upload-list--picture-card .el-upload-list__item {
                        width: 100px;
                        height: 100px;
                        margin: 0 8px 8px 0;
                    }
                    .custom-upload .el-upload-list__item-thumbnail {
                        object-fit: contain;
                        max-width: 100%;
                        max-height: 100%;
                    }
                    .custom-upload .el-upload--picture-card {
                        width: 100px;
                        height: 100px;
                    }
                    .upload-tip {
                        color: #999;
                        font-size: 12px;
                        margin-top: 8px;
                    }
                `;
                document.head.appendChild(style);

            });
            Vue.watch(()=>props.modelValue,(newvalue)=>{
                if(Array.isArray(newvalue)){
                    showList.value = newvalue.map(item=>{
                        return {
                            url:item
                        }
                    })
                }else{
                    showList.value = []
                }
            })
            return {
                handleFileSuccessMultiple,
                handleRemove,
                handleShowAttachment,
                showList,
                updateValue
            }
        }
    }
    return muimgs
})